<template>
  <!-- 筛选组件 -->
  <div class="screenContainer">
    <div class="title">
      {{ pageTypeName[pageType - 1] }}
    </div>
    <!-- 关键字筛选 -->
    <div class="screenItem" v-if="layoutFaly.includes('keyword')">
      <div class="inputCont">
        <span class="label">搜关键字：</span>
        <div class="labScach">
          <input v-model="input1" @input="keyWordInputFun" placeholder="请输入标题关键字进行搜索" />
          <search class="searchIcon" theme="outline" size="20" fill="#999" />
        </div>
      </div>
      <div class="inputCont">
        <span class="label">所属月份：</span>
        <div>
          <el-date-picker size="large" v-model="value2" :disabled-date="disabledDate" value-format="YYYY-MM" type="month"
            @change="changeMonthTime" placeholder="选择月份" />
        </div>
      </div>
    </div>
    <!-- 一二级别筛选项 -->
    <div ref="levelCon" class="liconTran" :class="{ liconHeight: !layoutFaly.includes('shrink') }">
      <div class="levelList" v-if="layoutFaly.includes('one')">
        <span class="label">一级分类：</span>
        <div class="oneLevel">
          <div @click="changeOne(-1, -1)" class="levelItem" :class="{ active: oneSelectIndex < 0 }">
            全部
          </div>
          <div @click="changeOne(index, item.id)" class="levelItem" :class="{ active: index === oneSelectIndex }"
            :key="index" v-for="(item, index) in oneList">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="levelList" v-if="layoutFaly.includes('two')">
        <span class="label">二级分类：</span>
        <div class="oneLevel">
          <div class="levelItem" @click="changeTwo(-1, -1)" :class="{ active: twoSelectIndex < 0 }">
            全部
          </div>
          <div class="levelItem" @click="changeTwo(index, item.id)" :class="{ active: index === twoSelectIndex }"
            :key="index" v-for="(item, index) in twoList">
            {{ item.name }}
          </div>
        </div>
      </div>

      <!-- <div class="levelList levelTime" v-if="layoutFaly.includes('monthTime')">
        <span class="label">所属月份：</span>
        <div class="oneLevel">
          <div class="block">
            <el-date-picker size="large" v-model="value2" :disabled-date="disabledDate" value-format="YYYY-MM"
              type="month" @change="changeMonthTime" placeholder="选择月份" />
          </div>
        </div>
      </div> -->
    </div>
    <!-- 村导入文件按钮 -->
    <div class="leadingIn">
      <!-- 上传导入文件 -->
      <!-- <div class="cunCitt" v-if="layoutFaly.includes('cunSqAddress')">{{ cunCityName }}</div> -->

      <div class="leadingInBtn2 flexBtn" v-if="layoutFaly.includes('cunUpload') || layoutFaly.includes('sqUpload')">
        <!-- <div class="tit">南塘村</div> -->
        <el-upload class="uploadDemo" v-if="layoutFaly.includes('sqUpload')" :file-list="fileList" action="#" :limit="1"
          :show-file-list="false" :http-request="() => { }" :on-change="(e) => addAllChangeImg(e, 1)" accept=".xlsx, .xls"
          :auto-upload="false">
          <template #trigger>
            <div class="btn info infoBgCol">
              <folder-upload class="uploadIcon" theme="outline" size="22" fill="#fff" />
              导入社区报表
            </div>
          </template>
        </el-upload>

        <el-upload v-if="layoutFaly.includes('cunUpload')" class="uploadDemo" :file-list="[]" action="#" :limit="1"
          :show-file-list="false" :http-request="() => { }" :on-change="(e) => addAllChangeImg(e, 2)" accept=".xlsx, .xls"
          :auto-upload="false">
          <template #trigger>
            <div class="btn info infoBgCol">
              <folder-upload class="uploadIcon" theme="outline" size="22" fill="#fff" />
              导入村报表
            </div>
          </template>
        </el-upload>
      </div>

      <!-- 重置 -->
      <div class="leadingInBtn2" v-if="layoutFaly.includes('reset')">
        <div @click="resetFrom" class="btn info">重置筛选</div>
      </div>
    </div>
    <!-- 收起展开按钮 -->
    <div class="levelBtn" v-if="layoutFaly.includes('shrink')">
      <div class="levenOpen" @click="setPackUp">
        <span>{{ isOpenScreen ? "收起筛选" : "展开筛选" }}</span>
        <down :class="{ levenRotate: isOpenScreen }" theme="outline" size="22" fill="#666" />
      </div>
    </div>
  </div>
</template>
<script>
//引入vue方法
export default {
  props: ["layout", "pageType"],
  data() {
    return {
      pageTypeName: [
        '镇级党务公开审核',
        '镇级政务公开审核',
        '镇级财务公开审核',
        '党务公开审核',
        '村务公开审核',
        '财务公开审核',
        '资金管理审核',
        '资源管理审核',
        '资产管理审核',
      ],
      timeOut: null,
      disabledDate: (time) => {
        return time.getTime() > Date.now();
      },
      cunCityName: '',
      oneList: [],
      twoList: [],
      fileList: [],
      oneSelectIndex: -1,
      twoSelectIndex: -1,
      layoutFaly: [],
      input1: "",
      value2: "",
      levelHeight: 0,
      isOpenScreen: false,
    };
  },
  mounted() {
    if (this.layout) {
      this.layoutFaly = this.layout.replace(/\s*/g, "").split(",");
    }
    if (this.layoutFaly.includes('one')) {
      this.findThreeClassifyById(1, 1);
    }
    // this.indexAccountDetail()
  },
  methods: {
    // indexAccountDetail() {
    //   this.$http.post("/axh/indexAccountDetail").then((res) => {
    //     if (res && res.result) {
    //       this.cunCityName = res.result?.manageAreaList[0] || '';
    //     }
    //   });
    // },
    resetFrom() {
      this.input1 = "";
      this.oneSelectIndex = -1;
      this.twoSelectIndex = -1;
      this.value2 = "";
      this.$emit("resetFrom");
    },
    changeTwo(index, id) {
      if (id == -1) {
        this.twoSelectIndex = -1;
      } else {
        this.twoSelectIndex = index;
      }
      this.$emit("changeTwo", {
        id: id,
      });
    },
    changeOne(index, id) {
      if (id == -1) {
        this.findThreeClassifyById2(1, -1);
        this.oneSelectIndex = -1;
      } else {
        this.oneSelectIndex = index;
        this.findThreeClassifyById2(2, id);
      }
      this.twoSelectIndex = -1;
      this.$emit("changeOne", {
        id: id,
      });
    },
    // 一级
    findThreeClassifyById(index, id) {
      this.$http.post("/axh/findSortParent?pageType="+this.pageType).then((res) => {
        this.oneList = res.result.filter((v) => {
          return v.name != '镇'
        })
        // if (res.result && res.result.length) {
        //   this.oneSelectIndex = 0
        //   this.findThreeClassifyById2(1, res.result[0].id)
        // }
        this.findThreeClassifyById2(1, -1)
      });
    },
    // 二级
    findThreeClassifyById2(index, id) {
      this.$http.post("/axh/findUserManageSortByPid?pid=" + id).then((res) => {
        this.twoList = res.result;
      });
    },
    // findThreeClassifyById(index, id) {
    //   this.$http
    //     .post("/axh/findSortParent", {
    //       pidStr: id,
    //     })
    //     .then((res) => {
    //       if (index === 1) {
    //         this.oneList = res.result;
    //         if (this.oneSelectIndex === -1) {
    //           let pojo = [];
    //           res.result.forEach((item) => {
    //             pojo.push(item.id);
    //           });

    //           // this.findThreeClassifyById(2, pojo.join(","));
    //         }
    //       } else {
    //         this.twoList = res.result;
    //       }
    //     });
    // },
    keyWordInputFun() {
      if (this.timeOut !== null) {
        clearTimeout(this.timeOut);
        this.timeOut = null;
      }
      // 防抖！
      this.timeOut = setTimeout(() => {
        this.$emit("keyWordInput", {
          value: this.input1,
        });
      }, 1000);
    },
    // 收起
    setPackUp() {
      const liCon = this.$refs.levelCon;
      let height = liCon.offsetHeight;
      if (height === this.levelHeight) {
        // 展开
        liCon.style.height = "auto";
        height = liCon.offsetHeight;
        liCon.style.height = this.levelHeight + "px";
        let f = document.body.offsetHeight; // 必加
        liCon.style.height = height + "px";
        this.isOpenScreen = true;
        setTimeout(() => {
          liCon.style.height = "auto";
        }, 550);
      } else {
        // 收缩
        liCon.style.height = height + "px";
        let f = document.body.offsetHeight; // 必加
        liCon.style.height = this.levelHeight + "px";
        this.isOpenScreen = false;
      }
    },
    addAllChangeImg(data, type) {
      this.$emit("addAllChangeImg", {
        value: data,
        type: type,
      });
      this.fileList = []
    },
    changeMonthTime(data) {
      this.$emit("changeMonthTime", {
        value: this.value2,
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.screenContainer {
  position: relative;
  width: 100%;

  .title {
    font-size: 24px;
    padding: 14px 0;
    font-weight: 600;
    color: #2C83E4;
  }

  .label {
    width: 90px;
  }

  .screenItem {
    display: flex;
    align-items: center;
    min-height: 64px;

    .inputCont {
      display: flex;
      align-items: center;
      width: 360px;
      margin-right: 24px;

      .label {
        width: auto;
      }
    }
  }

  .liconTran {
    height: 0;
    transition: all 0.5s ease 0s;
    overflow: hidden;
  }

  .liconHeight {
    height: auto;
  }

  .levelList {
    display: flex;
    min-height: 64px;
    padding: 20px 0 10px 0;

    .oneLevel {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      width: 0;
      color: $color999999;

      .levelItem {
        margin-right: 12px;
        padding: 4px 12px;
        height: 26px;
        border-radius: 2px;
        line-height: 18px;
        cursor: pointer;
        margin-bottom: 10px;
      }

      .active {
        background-color: $bgColor2C83E4;
        color: $colorFFFFFF;
      }
    }
  }

  .levelTime {
    align-items: center;

    .oneLevel {
      display: flex;
      align-items: center;

      .levelItem {
        margin-bottom: 0;
      }
    }
  }

  .levelBtn {
    display: flex;
    justify-content: center;
    color: $color999999;
    font-size: 16px;

    .levenOpen {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      span {
        margin-right: 4px;
      }

      .levenRotate {
        transform: rotate(180deg);
      }
    }
  }

  .leadingIn {
    position: absolute;
    top: 60px;
    right: 0;

    .cunCitt {
      text-align: right;
      font-size: 30px;
      margin-bottom: 20px;
    }

    .leadingInBtn2 {
      display: flex;
      flex-direction: column;
      text-align: right;

      .tit {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 26px;
        color: $color35353F;
      }

      .btn {
        margin-left: 16px;

        .uploadIcon {
          margin-right: 10px;
        }
      }
    }

    .flexBtn {
      display: flex;
      flex-direction: row;

      .infoBgCol {
        background-color: #3ABF70;
      }
    }
  }
}
</style>